<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/static/css/register.css" media="all">
    <style>

    </style>
</head>
<body>

<div class="layuimini-main">

    <!--    导航栏-->
    <div class="layui-row">
        <div class="layui-col-md10">
            <!--    导航栏-->
            <ul class="layui-nav" style="border-radius: 0;background-color: rgb(84, 86, 82)" lay-filter="">
                <li class="layui-nav-item layui-this"><a href="/">图书</a></li>
            </ul>
            <!--    导航栏-->
        </div>
        <div class="layui-col-md2">

            <!--    导航栏  登录之前的-->
            <ul class="layui-nav" style="border-radius: 0;background-color: rgb(84, 86, 82)">
                <li class="layui-nav-item">
                    <button type="button" onclick="loginBtn()"
                            class="layui-btn layui-btn layui-btn-normal"
                            style="margin: 0px 5px">用户登录
                    </button>
                </li>
            </ul>
            <!--    导航栏  登录之前的-->


        </div>
    </div>
    <!--    导航栏-->


    <!--    注册表单-->
    <div class="register-form">

        <form class="layui-form form-box" action="">

            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-inline">
                    <input type="text" id="register-account" placeholder="请设置账号" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">请设置账号(包含数字或字母共11位字符)</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="register-password" placeholder="请设置密码" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" id="register-email" lay-verify="email" placeholder="请设置邮箱" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">请设置邮箱</div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                    <input type="radio" class="sex-radio" name="sex" value="男" title="男" checked="">
                    <input type="radio" class="sex-radio" name="sex" value="女" title="女">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block" style="text-align: center">
                    <button type="button" class="layui-btn" onclick="register()">注册</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

    </div>
    <!--    注册表单-->


    <!--    登录表单-->
    <div id="login-form" style="display: none">
        <form class="layui-form form-box" action="">

            <div class="layui-form-item" style="margin-top: 20px">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-inline">
                    <input type="text" id="account" value="12345678910" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">请输入账号</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="password" value="123456" lay-verify="pass" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">请输入密码</div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                    <input type="text" id="code" style="width: 80px;display: inline-block" autocomplete="off"
                           class="layui-input">
                    <img id="refreshCaptcha" class="validateImg" onclick="changeyanz();"
                         src="">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top: 35px">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" onclick="login()">登录</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

    </div>
    <!--    登录表单-->


</div>

<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    let $$ = null
    layui.use(['layer', 'element', 'laypage'], function () {
        let layer = layui.layer,
            element = layui.element,
            $ = $$ = layui.jquery;


    });

    function loginBtn() {
        /**
         * 获取验证码
         */
        changeyanz()
        layer.open({
            type: 1,
            shade: false,
            title: false, //不显示标题
            content: $$('#login-form')
        });
    }


    function login() {

        let account = $$("#account").val().trim()
        let password = $$("#password").val().trim()
        let code = $$("#code").val().trim()
        if (account === "") {
            layer.msg("请输入账号", {icon: 5});
            return
        }
        if (password === "") {
            layer.msg("请输入密码", {icon: 5});
            return
        }
        if (code === "") {
            layer.msg("请输入验证码", {icon: 5});
            return
        }

        $$.ajax({
            type: "post",
            url: "/login",
            dataType: "json",
            data: JSON.stringify({account, password, code, admin: false}),
            contentType: "application/json;charset=UTF-8",
            success: function (data) {
                if (data.code === 200) {
                    layer.msg('登录成功', {icon: 1});
                    setTimeout(() => {
                        location.href = "/"
                    }, 1000)
                } else {
                    layer.msg(data.msg, {icon: 5});
                }
            }
        });

    }


    function register() {
        let account = $$("#register-account").val().trim()
        let password = $$("#register-password").val().trim()
        let email = $$("#register-email").val().trim()
        let gender = 1 // 1男；0女

        let radios = document.getElementsByClassName("sex-radio")
        for (let i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                if (radios[i].value === '男') {
                    gender = 1
                } else {
                    gender = 0
                }
            }
        }


        /**
         * 正则校验
         */
        let accountReg = /^[a-zA-Z0-9]{11}$/;
        if (!accountReg.test(account)) {
            layer.msg("请设置英文或数字共11位字符的账号", {icon: 5});
            return
        }

        let passwordReg = /^[a-zA-Z0-9]{6,20}$/
        if (!passwordReg.test(password)) {
            layer.msg("请设置包含数字或英文的6到20个字符的密码", {icon: 5});
            return
        }

        let emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
        if (!emailReg.test(email)) {
            layer.msg("请输入正确的邮箱地址", {icon: 5});
            return
        }

        $$.ajax({
            type: "post",
            url: "/register",
            dataType: "json",
            data: JSON.stringify({account, password, email, gender}),
            contentType: "application/json;charset=UTF-8",
            success: function (data) {
                if (data.code === 200) {
                    layer.msg('注册成功', {icon: 1});
                    setTimeout(() => {
                        location.href = "/"
                    }, 1000)
                } else {
                    layer.msg(data.msg, {icon: 5});
                }
            }
        });

    }

    function changeyanz() {
        $$("#refreshCaptcha").attr("src", "/common/captchaImage?d=" + new Date().getTime());
    }

</script>
</body>
</html>
